playwriter
Code Issues

website: add transparent PNG favicons, typed meta/links exports, OG image

Browse Source 
- Replace favicon.ico with transparent PNG favicons (32px, 16px) generated
  from the gray extension icon, preserving alpha channel
- Move favicon links from hardcoded JSX to typed LinksFunction export in
  root.tsx, rendered via <Links /> component
- Type liveline meta export as MetaFunction
- Add properly sized OG image (1200x630) for X/Slack/Discord previews,
  update meta tags to reference it
This commit is contained in:
Tommy D. Rossi
2026-02-20 15:57:12 +01:00
parent 3917c5137d
commit b7f02ac9f4
6 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/public/favicon-16.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 771 B

website/public/favicon-32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1023 B

website/public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

website/public/og-image.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 KiB

website/src/root.tsx
+6
View File
@@ -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 (
<html lang="en">
website/src/routes/liveline.tsx
+6 -5
View File
@@ -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" },