diff --git a/app/(authenticated)/vault/opengraph-image.alt.txt b/app/(authenticated)/vault/opengraph-image.alt.txt deleted file mode 100644 index a742c098..00000000 --- a/app/(authenticated)/vault/opengraph-image.alt.txt +++ /dev/null @@ -1 +0,0 @@ -OpenInstinct secure vault setup diff --git a/app/(authenticated)/vault/opengraph-image.png b/app/(authenticated)/vault/opengraph-image.png deleted file mode 100644 index 9f571254..00000000 Binary files a/app/(authenticated)/vault/opengraph-image.png and /dev/null differ diff --git a/app/_components/og-mark.tsx b/app/_components/og-mark.tsx deleted file mode 100644 index 333a9785..00000000 --- a/app/_components/og-mark.tsx +++ /dev/null @@ -1,190 +0,0 @@ -export interface OpenGraphMarkProps { - /** - * The top-face color as a hex or `oklch()` value. - */ - color: string; - foreground?: string; - size?: number; -} - -interface OklchColor { - c: number; - h: number; - l: number; -} - -export function OpenGraphMark({ - color, - foreground = "currentColor", - size = 40, -}: OpenGraphMarkProps) { - const top = parseOklch(color); - const left = oklchToHex({ - c: top.c * 0.8, - h: top.h, - l: top.l * 0.8, - }); - const right = oklchToHex({ - c: top.c * 0.82, - h: top.h, - l: top.l * 0.82 + 0.18, - }); - - return ( - - ); -} - -function parseOklch(color: string): OklchColor { - if (color.startsWith("#")) { - return hexToOklch(color); - } - - const match = - /^oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+(-?[\d.]+)(?:deg)?(?:\s*\/\s*[\d.]+%?)?\s*\)$/i.exec( - color - ); - - if (!match) { - throw new Error( - `OpenGraphMark color must be a hex or oklch() value. Received: ${color}` - ); - } - - const [, lightness, chroma, hue] = match; - if (!lightness || !chroma || !hue) { - throw new Error(`Could not parse OpenGraphMark color: ${color}`); - } - - return { - c: parseColorChannel(chroma, 0.4), - h: Number(hue), - l: parseColorChannel(lightness, 1), - }; -} - -function parseColorChannel(value: string, percentageScale: number) { - return value.endsWith("%") - ? (Number(value.slice(0, -1)) / 100) * percentageScale - : Number(value); -} - -function hexToOklch(color: string): OklchColor { - const value = - color.length === 4 - ? color - .slice(1) - .split("") - .map((channel) => channel.repeat(2)) - .join("") - : color.slice(1); - - if (!/^[\da-f]{6}$/i.test(value)) { - throw new Error( - `OpenGraphMark color must use #rgb or #rrggbb hex syntax. Received: ${color}` - ); - } - - const r = srgbToLinear(Number.parseInt(value.slice(0, 2), 16) / 255); - const g = srgbToLinear(Number.parseInt(value.slice(2, 4), 16) / 255); - const b = srgbToLinear(Number.parseInt(value.slice(4, 6), 16) / 255); - const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b); - const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b); - const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b); - const lightness = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s; - const a = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s; - const labB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s; - - return { - c: Math.hypot(a, labB), - h: (Math.atan2(labB, a) * 180) / Math.PI, - l: lightness, - }; -} - -function oklchToHex({ c, h, l }: OklchColor) { - const radians = (h * Math.PI) / 180; - const a = c * Math.cos(radians); - const labB = c * Math.sin(radians); - const lRoot = l + 0.3963377774 * a + 0.2158037573 * labB; - const mRoot = l - 0.1055613458 * a - 0.0638541728 * labB; - const sRoot = l - 0.0894841775 * a - 1.291485548 * labB; - const linearR = - 4.0767416621 * lRoot ** 3 - - 3.3077115913 * mRoot ** 3 + - 0.2309699292 * sRoot ** 3; - const linearG = - -1.2684380046 * lRoot ** 3 + - 2.6097574011 * mRoot ** 3 - - 0.3413193965 * sRoot ** 3; - const linearB = - -0.0041960863 * lRoot ** 3 - - 0.7034186147 * mRoot ** 3 + - 1.707614701 * sRoot ** 3; - - return `#${[linearR, linearG, linearB] - .map((channel) => - Math.round(linearToSrgb(channel) * 255) - .toString(16) - .padStart(2, "0") - ) - .join("")}`; -} - -function srgbToLinear(channel: number) { - return channel <= 0.04045 - ? channel / 12.92 - : ((channel + 0.055) / 1.055) ** 2.4; -} - -function linearToSrgb(channel: number) { - const value = - channel <= 0.0031308 - ? 12.92 * channel - : 1.055 * channel ** (1 / 2.4) - 0.055; - - return Math.min(1, Math.max(0, value)); -} diff --git a/app/apple-icon.png b/app/apple-icon.png new file mode 100644 index 00000000..3b0c9dd7 Binary files /dev/null and b/app/apple-icon.png differ diff --git a/app/icon.svg b/app/icon.svg new file mode 100644 index 00000000..08b991b9 --- /dev/null +++ b/app/icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/icon.tsx b/app/icon.tsx deleted file mode 100644 index c9af9790..00000000 --- a/app/icon.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { OpenGraphMark } from "./_components/og-mark"; -import { ImageResponse } from "next/og"; - -export const size = { - height: 32, - width: 32, -}; - -export const contentType = "image/png"; - -export default function Icon() { - return new ImageResponse( -
- -
, - size - ); -} diff --git a/app/opengraph-image.alt.txt b/app/opengraph-image.alt.txt new file mode 100644 index 00000000..e8cf3141 --- /dev/null +++ b/app/opengraph-image.alt.txt @@ -0,0 +1 @@ +OpenInstinct \ No newline at end of file diff --git a/app/opengraph-image.png b/app/opengraph-image.png new file mode 100644 index 00000000..aaf6fc03 Binary files /dev/null and b/app/opengraph-image.png differ diff --git a/proxy.ts b/proxy.ts index f8dd1111..4bbe926b 100644 --- a/proxy.ts +++ b/proxy.ts @@ -24,5 +24,7 @@ export async function proxy(request: NextRequest) { } export const config = { - matcher: ["/((?!_next/static|_next/image|fonts|favicon.ico).*)"], + matcher: [ + "/((?!_next/static|_next/image|fonts|favicon.ico|icon\\.svg$|apple-icon\\.png$|opengraph-image\\.png$).*)", + ], }; diff --git a/web/auth/tests/proxy.test.ts b/web/auth/tests/proxy.test.ts index 58f6520d..667f0c1e 100644 --- a/web/auth/tests/proxy.test.ts +++ b/web/auth/tests/proxy.test.ts @@ -18,6 +18,29 @@ beforeEach(() => { }); describe("auth proxy matcher", () => { + it.each([ + "/icon.svg", + "/icon.svg?icon.hash.svg", + "/apple-icon.png", + "/apple-icon.png?apple-icon.hash.png", + "/opengraph-image.png", + "/opengraph-image.png?opengraph-image.hash.png", + ])("does not match public branding asset %s", (url) => { + expect(unstable_doesMiddlewareMatch({ config, nextConfig: {}, url })).toBe( + false + ); + }); + + it.each([ + "/icon.svg/private", + "/apple-icon.png/private", + "/opengraph-image.png/private", + ])("continues to match paths beneath a branding filename %s", (url) => { + expect(unstable_doesMiddlewareMatch({ config, nextConfig: {}, url })).toBe( + true + ); + }); + it("does not match public fonts", () => { expect( unstable_doesMiddlewareMatch({ diff --git a/web/components/ui/logo.tsx b/web/components/ui/logo.tsx index 7d59529f..69513695 100644 --- a/web/components/ui/logo.tsx +++ b/web/components/ui/logo.tsx @@ -1,76 +1,26 @@ import * as React from "react"; type LogoProps = React.ComponentPropsWithoutRef<"svg">; -type LogoCssProperties = React.CSSProperties & Record<`--${string}`, string>; -const logoThemeStyles = { - "--logo-face-left-opacity": "0.82", - "--logo-face-right-opacity": "0.64", - "--logo-outline": "var(--foreground)", -} satisfies LogoCssProperties; - -function Logo({ className, style, ...props }: LogoProps) { +function Logo({ className, ...props }: LogoProps) { return ( ); }