diff --git a/LICENSES/OFL-1.1.txt b/LICENSES/OFL-1.1.txt new file mode 100644 index 0000000000..6fe84ee21e --- /dev/null +++ b/LICENSES/OFL-1.1.txt @@ -0,0 +1,43 @@ +SIL OPEN FONT LICENSE + +Version 1.1 - 26 February 2007 + +PREAMBLE + +The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others. + +The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. + +DEFINITIONS + +"Font Software" refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the copyright statement(s). + +"Original Version" refers to the collection of Font Software components as distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, or substituting — in part or in whole — any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment. + +"Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS + +Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission. + +5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software. + +TERMINATION + +This license becomes null and void if any of the above conditions are not met. + +DISCLAIMER + +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/REUSE.toml b/REUSE.toml index 84d5ca5502..2bd86a03a2 100644 --- a/REUSE.toml +++ b/REUSE.toml @@ -38,3 +38,19 @@ path = ["spec-*.md", "apps/site/content/docs/spec-*.md", "packages/conformance-s precedence = "override" SPDX-FileCopyrightText = "The PDP-Connect Contributors" SPDX-License-Identifier = "LicenseRef-CSL-1.0" + +# Font files vendored for the share card renderer, copied unmodified from the +# upstream releases: Inter 4.1 (github.com/rsms/inter) and Source Serif 4.005 +# (github.com/adobe-fonts/source-serif). Each upstream licence file sits beside +# its fonts. +[[annotations]] +path = ["apps/site/assets/share-card/Inter-*"] +precedence = "override" +SPDX-FileCopyrightText = "2016 The Inter Project Authors (https://github.com/rsms/inter)" +SPDX-License-Identifier = "OFL-1.1" + +[[annotations]] +path = ["apps/site/assets/share-card/SourceSerif4-*"] +precedence = "override" +SPDX-FileCopyrightText = "2014-2023 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'" +SPDX-License-Identifier = "OFL-1.1" diff --git a/apps/site/assets/share-card/Inter-Bold.ttf b/apps/site/assets/share-card/Inter-Bold.ttf new file mode 100644 index 0000000000..9fb9b751e5 Binary files /dev/null and b/apps/site/assets/share-card/Inter-Bold.ttf differ diff --git a/apps/site/assets/share-card/Inter-LICENSE.txt b/apps/site/assets/share-card/Inter-LICENSE.txt new file mode 100644 index 0000000000..9b2ca37b3f --- /dev/null +++ b/apps/site/assets/share-card/Inter-LICENSE.txt @@ -0,0 +1,92 @@ +Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION AND CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/apps/site/assets/share-card/Inter-Regular.ttf b/apps/site/assets/share-card/Inter-Regular.ttf new file mode 100644 index 0000000000..b7aaca8de1 Binary files /dev/null and b/apps/site/assets/share-card/Inter-Regular.ttf differ diff --git a/apps/site/assets/share-card/SourceSerif4-Bold.ttf b/apps/site/assets/share-card/SourceSerif4-Bold.ttf new file mode 100644 index 0000000000..c4159ff2a4 Binary files /dev/null and b/apps/site/assets/share-card/SourceSerif4-Bold.ttf differ diff --git a/apps/site/assets/share-card/SourceSerif4-It.ttf b/apps/site/assets/share-card/SourceSerif4-It.ttf new file mode 100644 index 0000000000..e818087d0c Binary files /dev/null and b/apps/site/assets/share-card/SourceSerif4-It.ttf differ diff --git a/apps/site/assets/share-card/SourceSerif4-LICENSE.md b/apps/site/assets/share-card/SourceSerif4-LICENSE.md new file mode 100644 index 0000000000..ebe298c6b4 --- /dev/null +++ b/apps/site/assets/share-card/SourceSerif4-LICENSE.md @@ -0,0 +1,93 @@ +Copyright 2014 - 2023 Adobe (http://www.adobe.com/), with Reserved Font Name ‘Source’. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. + +This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/apps/site/assets/share-card/SourceSerif4-Regular.ttf b/apps/site/assets/share-card/SourceSerif4-Regular.ttf new file mode 100644 index 0000000000..964a2bf893 Binary files /dev/null and b/apps/site/assets/share-card/SourceSerif4-Regular.ttf differ diff --git a/apps/site/src/app/(concept)/principles/card/[format]/route.test.ts b/apps/site/src/app/(concept)/principles/card/[format]/route.test.ts new file mode 100644 index 0000000000..1f9c96f930 --- /dev/null +++ b/apps/site/src/app/(concept)/principles/card/[format]/route.test.ts @@ -0,0 +1,62 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +import assert from "node:assert/strict"; +import { afterEach, test } from "node:test"; +import { SHARE_CARD_FORMATS } from "@/lib/share-card/copy.ts"; +import { GET, generateStaticParams } from "./route.tsx"; + +const FLAG = "NEXT_PUBLIC_PDPP_SHARE_CARD"; +const PNG_SIGNATURE = "89504e470d0a1a0a"; + +afterEach(() => { + delete process.env[FLAG]; +}); + +function request(format: string): Promise { + return GET(new Request(`https://pdpp.dev/principles/card/${format}`), { params: Promise.resolve({ format }) }); +} + +// A PNG starts with an 8-byte signature, then the IHDR chunk: length, "IHDR", +// then width and height as big-endian 32-bit integers at bytes 16 and 20. +function pngSize(png: Buffer): { height: number; signature: string; width: number } { + return { + height: png.readUInt32BE(20), + signature: png.subarray(0, 8).toString("hex"), + width: png.readUInt32BE(16), + }; +} + +test("the card routes are built for exactly the feed and story formats", () => { + assert.deepEqual(generateStaticParams(), [{ format: "feed" }, { format: "story" }]); +}); + +for (const format of ["feed", "story"] as const) { + test(`${format} returns a PNG of ${SHARE_CARD_FORMATS[format].width}x${SHARE_CARD_FORMATS[format].height} when the flag is true`, async () => { + process.env[FLAG] = "true"; + const response = await request(format); + assert.equal(response.status, 200); + assert.equal(response.headers.get("content-type"), "image/png"); + assert.deepEqual(pngSize(Buffer.from(await response.arrayBuffer())), { + ...SHARE_CARD_FORMATS[format], + signature: PNG_SIGNATURE, + }); + }); +} + +test("an unknown format is a 404 even when the flag is on", async () => { + process.env[FLAG] = "true"; + assert.equal((await request("banner")).status, 404); +}); + +for (const value of [undefined, "", "0", "1", "false", "yes"]) { + test(`the routes are a 404 when the flag is ${JSON.stringify(value)}`, async () => { + if (value === undefined) { + delete process.env[FLAG]; + } else { + process.env[FLAG] = value; + } + const [feed, story] = await Promise.all([request("feed"), request("story")]); + assert.deepEqual([feed.status, story.status], [404, 404]); + }); +} diff --git a/apps/site/src/app/(concept)/principles/card/[format]/route.tsx b/apps/site/src/app/(concept)/principles/card/[format]/route.tsx new file mode 100644 index 0000000000..a9ceaa3637 --- /dev/null +++ b/apps/site/src/app/(concept)/principles/card/[format]/route.tsx @@ -0,0 +1,22 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +import { isShareCardFormat, SHARE_CARD_FORMAT_NAMES } from "@/lib/share-card/copy.ts"; +import { renderShareCard } from "@/lib/share-card/render.tsx"; +import { shareCardEnabled } from "@/lib/site-config.ts"; + +// The supporter card is the same image for everyone, so each size is built once +// at build time. Only the two known formats exist; anything else is a 404. +export const dynamicParams = false; + +export function generateStaticParams(): { format: string }[] { + return SHARE_CARD_FORMAT_NAMES.map((format) => ({ format })); +} + +export async function GET(_request: Request, context: { params: Promise<{ format: string }> }): Promise { + const { format } = await context.params; + if (!(shareCardEnabled() && isShareCardFormat(format))) { + return new Response("Not found", { status: 404 }); + } + return await renderShareCard(format); +} diff --git a/apps/site/src/app/(concept)/principles/page.tsx b/apps/site/src/app/(concept)/principles/page.tsx index dde6056370..c0bab07888 100644 --- a/apps/site/src/app/(concept)/principles/page.tsx +++ b/apps/site/src/app/(concept)/principles/page.tsx @@ -85,7 +85,11 @@ export default async function Page({
- + {/* After a submission or a confirmation the person is done: showing an + empty form again reads as "sign again". Error states keep it for a retry. */} + {params.signed === "pending" || params.signed === "confirmed" ? null : ( + + )}
diff --git a/apps/site/src/components/elements/icons.tsx b/apps/site/src/components/elements/icons.tsx index 4d25b214c1..f1a69c6ad4 100644 --- a/apps/site/src/components/elements/icons.tsx +++ b/apps/site/src/components/elements/icons.tsx @@ -38,7 +38,7 @@ export function DiscordIcon({ className = "pdpp-icon-discord" }: { className?: s // the design concept (index.html .wordmark__mark). currentColor so it picks // up --pdpp-editorial-ink in the masthead and --pdpp-editorial-paper in the // footer, same as the concept's own wordmark. -const WORDMARK_PATH = +export const WORDMARK_PATH = "M60 30C65.3043 30 70.3919 32.1067 74.1426 35.8574C77.8933 39.6081 80 44.6957 80 50V110C80 115.304 77.8933 120.392 74.1426 124.143C70.3919 127.893 65.3043 130 60 130H20V160H0V30H60ZM270 130H210V160H190V30H270V130ZM345 30C350.304 30 355.392 32.1067 359.143 35.8574C362.893 39.6081 365 44.6957 365 50V110C365 115.304 362.893 120.392 359.143 124.143C355.392 127.893 350.304 130 345 130H305V160H285V30H345ZM175 130H115C109.696 130 104.608 127.893 100.857 124.143C97.1067 120.392 95 115.304 95 110V50C95 44.6957 97.1067 39.6081 100.857 35.8574C104.608 32.1067 109.696 30 115 30H155V0H175V130ZM20 50V110H60V50H20ZM115 110H155V50H115V110ZM210 110H250V50H210V110ZM305 110H345V50H305V110Z"; export function WordmarkIcon({ className = "block h-[23px] w-auto" }: { className?: string }) { diff --git a/apps/site/src/components/site/share-card-panel.test.ts b/apps/site/src/components/site/share-card-panel.test.ts new file mode 100644 index 0000000000..42c785cb2f --- /dev/null +++ b/apps/site/src/components/site/share-card-panel.test.ts @@ -0,0 +1,98 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +import assert from "node:assert/strict"; +import { afterEach, test } from "node:test"; +import { createElement } from "react"; +import { renderToStaticMarkup } from "react-dom/server"; +import { linkedInShareUrl, SHARE_CARD_ALT, SHARE_CARD_CAPTION, xIntentUrl } from "@/lib/share-card/copy.ts"; +import { ShareCardPanel } from "./share-card-panel.tsx"; +import { PdppSigningStatus } from "./signing-status.tsx"; + +const FLAG = "NEXT_PUBLIC_PDPP_SHARE_CARD"; +const PANEL_SLOT = /data-slot="pdpp-share-card-panel"/; +const OLD_SHARE_BUTTON = />Share { + delete process.env[FLAG]; +}); + +function statusHtml(signed: string): string { + return renderToStaticMarkup(createElement(PdppSigningStatus, { signed })); +} + +test("the panel shows on a confirmed signature when the flag is true", () => { + process.env[FLAG] = "true"; + assert.match(statusHtml("confirmed"), PANEL_SLOT); +}); + +test("the panel is hidden when the flag is off, unset, or not exactly true", () => { + for (const value of [undefined, "", "0", "1"]) { + if (value === undefined) { + delete process.env[FLAG]; + } else { + process.env[FLAG] = value; + } + assert.doesNotMatch(statusHtml("confirmed"), PANEL_SLOT, JSON.stringify(value)); + } +}); + +test("the panel is hidden on every outcome except confirmed, even with the flag on", () => { + process.env[FLAG] = "true"; + for (const signed of ["pending", "incomplete", "ratelimited", "unavailable", "closed", "error", "invalid", "other"]) { + assert.doesNotMatch(statusHtml(signed), PANEL_SLOT, signed); + } +}); + +test("the panel shows the feed image, the caption and the buttons in order", () => { + const html = renderToStaticMarkup(createElement(ShareCardPanel)); + assert.ok(html.includes(`alt="${SHARE_CARD_ALT}"`)); + assert.ok(html.includes('src="/principles/card/feed"')); + assert.ok(html.includes('href="/principles/card/feed"')); + assert.ok(html.includes('href="/principles/card/story"')); + assert.ok(html.includes('download="pdpp-supporter-card.png"')); + assert.ok(html.includes('download="pdpp-supporter-card-story.png"')); + const labels = ["Download image", "Download for Stories", "Copy image", "Post on X", "Post on LinkedIn"]; + const positions = labels.map((label) => html.indexOf(`>${label}<`)); + assert.ok( + positions.every((position) => position > -1), + JSON.stringify(positions) + ); + assert.deepEqual( + positions, + [...positions].sort((a, b) => a - b) + ); + assert.ok(html.includes('aria-label="Copy caption"')); +}); + +test("the caption is shown verbatim", () => { + const expected = + "I just signed the pledge for global rules on where my data goes and who trains AI on it. Sign it too: https://pdpp.dev/principles #PDPP"; + assert.equal(SHARE_CARD_CAPTION, expected); + assert.ok(renderToStaticMarkup(createElement(ShareCardPanel)).includes(`>${expected}<`)); +}); + +test("the X link carries the caption without the link, and the link in its own field", () => { + const url = new URL(xIntentUrl()); + assert.equal(`${url.origin}${url.pathname}`, "https://x.com/intent/post"); + assert.equal( + url.searchParams.get("text"), + "#PDPP I just signed the pledge for global rules on where my data goes and who trains AI on it. Sign it too:" + ); + assert.equal(url.searchParams.get("url"), "https://pdpp.dev/principles"); +}); + +test("the LinkedIn link carries only the encoded page link", () => { + assert.equal( + linkedInShareUrl(), + "https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fpdpp.dev%2Fprinciples" + ); +}); + +test("Share… is not rendered without a browser, and the old link-only Share is gone", () => { + const html = renderToStaticMarkup(createElement(ShareCardPanel)); + assert.ok(!html.includes("Share…")); + assert.doesNotMatch(html, OLD_SHARE_BUTTON); + assert.doesNotMatch(html, OLD_FEED_DOWNLOAD); +}); diff --git a/apps/site/src/components/site/share-card-panel.tsx b/apps/site/src/components/site/share-card-panel.tsx new file mode 100644 index 0000000000..e0becf79e8 --- /dev/null +++ b/apps/site/src/components/site/share-card-panel.tsx @@ -0,0 +1,200 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +"use client"; + +import { Check, Copy } from "lucide-react"; +import { useEffect, useState } from "react"; +import { Text } from "@/components/typography/text.tsx"; +import { + linkedInShareUrl, + SHARE_CARD_ALT, + SHARE_CARD_CAPTION, + SHARE_CARD_FORMATS, + type ShareCardFormat, + shareCardPath, + xIntentUrl, +} from "@/lib/share-card/copy.ts"; +import { useCopyToClipboard } from "@/lib/use-copy-to-clipboard.ts"; +import { cn } from "@/lib/utils.ts"; + +const buttonClassName = cn( + "w-fit cursor-pointer border border-primary px-5 py-2.5 font-sans text-[15px]", + "bg-primary text-on-primary-emphasis hover:border-primary-emphasis hover:bg-primary-emphasis" +); +const quietButtonClassName = cn( + "w-fit cursor-pointer border border-border px-5 py-2.5 font-sans text-[15px]", + "text-foreground hover:border-primary hover:text-primary" +); + +// A text control that sits at the end of the caption, so it reads as part of the line and not as a second button row. +const inlineCopyClassName = cn( + // Plain inline (not flex), so "Copy" shares the caption's baseline; only the icon is nudged down. + "ml-2 inline cursor-pointer whitespace-nowrap font-medium font-sans text-[13px]", + "text-primary hover:text-primary-emphasis hover:underline hover:underline-offset-[3px]" +); + +const CAPTION_COPY_LABELS = { copied: "Copied", failed: "Copy failed", idle: "Copy" } as const; +const CAPTION_COPY_NAMES = { + copied: "Caption copied", + failed: "Copy failed. Select the caption and copy it by hand.", + idle: "Copy caption", +} as const; + +const IMAGE_FILE_NAME = "pdpp-supporter-card.png"; +const COPY_IMAGE_FAILED = "Your browser cannot copy images. Download it instead."; + +function downloadName(format: ShareCardFormat): string { + return format === "feed" ? IMAGE_FILE_NAME : "pdpp-supporter-card-story.png"; +} + +function isAbort(error: unknown): boolean { + return error instanceof DOMException && error.name === "AbortError"; +} + +/** Saves the card through a temporary link, so a post button can download and open a tab in one click. */ +function downloadCard(format: ShareCardFormat): void { + const anchor = document.createElement("a"); + anchor.href = shareCardPath(format); + anchor.download = downloadName(format); + anchor.click(); +} + +function openInNewTab(url: string): void { + window.open(url, "_blank", "noopener"); +} + +async function fetchCardBlob(format: ShareCardFormat): Promise { + const response = await fetch(shareCardPath(format)); + if (!response.ok) { + throw new Error(`Card request failed: ${response.status}`); + } + return await response.blob(); +} + +async function copyCaption(): Promise { + try { + await navigator.clipboard.writeText(SHARE_CARD_CAPTION); + return true; + } catch { + return false; + } +} + +/** A file with the card's name and type is enough to ask the browser whether it can share images. */ +function browserCanShareImages(): boolean { + if (typeof navigator.canShare !== "function") { + return false; + } + const probe = new File([], IMAGE_FILE_NAME, { type: "image/png" }); + return navigator.canShare({ files: [probe] }); +} + +/** + * Shown after a confirmed signing. The card is one image for every supporter + * and carries no personal data, so nothing here is recorded or sent anywhere. + */ +export function ShareCardPanel() { + const [status, setStatus] = useState(""); + const [canShareImages, setCanShareImages] = useState(false); + const { copy: copyCaptionText, status: captionCopyStatus } = useCopyToClipboard(); + + useEffect(() => { + setCanShareImages(browserCanShareImages()); + }, []); + + async function onCopyImage() { + try { + // Hand the browser a pending blob so the copy keeps the click's permission (Safari needs this). + await navigator.clipboard.write([new ClipboardItem({ "image/png": fetchCardBlob("feed") })]); + setStatus("Image copied."); + } catch { + setStatus(COPY_IMAGE_FAILED); + } + } + + function onPostOnX() { + // Open the tab first: a popup blocker only allows it inside the click itself. + openInNewTab(xIntentUrl()); + downloadCard("feed"); + setStatus("Image downloaded. Attach it to your post on X."); + } + + async function onPostOnLinkedIn() { + openInNewTab(linkedInShareUrl()); + downloadCard("feed"); + const copied = await copyCaption(); + setStatus( + copied + ? "Image downloaded and caption copied. Paste the caption and attach the image on LinkedIn." + : "Image downloaded. Copy the caption above and attach the image on LinkedIn." + ); + } + + async function onShare() { + try { + const file = new File([await fetchCardBlob("feed")], IMAGE_FILE_NAME, { type: "image/png" }); + await navigator.share({ files: [file], text: SHARE_CARD_CAPTION }); + } catch (error) { + if (!isAbort(error)) { + setStatus("We could not share the image. Download it instead."); + } + } + } + + return ( +
+ + Share your support + + {SHARE_CARD_ALT} + + {SHARE_CARD_CAPTION} + + +
+ + Download image + + + Download for Stories + + + + + {canShareImages ? ( + + ) : null} +
+ + {status} + +
+ ); +} diff --git a/apps/site/src/components/site/signing-status.tsx b/apps/site/src/components/site/signing-status.tsx index 9cfc09a08d..8142913352 100644 --- a/apps/site/src/components/site/signing-status.tsx +++ b/apps/site/src/components/site/signing-status.tsx @@ -1,8 +1,10 @@ // Copyright The PDP-Connect Contributors // SPDX-License-Identifier: Apache-2.0 +import { ShareCardPanel } from "@/components/site/share-card-panel.tsx"; import { Text } from "@/components/typography/text.tsx"; import { signedStatusMessage } from "@/lib/signing/status-messages.ts"; +import { shareCardEnabled } from "@/lib/site-config.ts"; const WITHDRAW_MESSAGES: Record = { closed: "Signing is closed. Nothing was changed.", @@ -17,10 +19,14 @@ export function PdppSigningStatus({ signed, withdraw }: { signed?: string; withd return null; } return ( -
- - {message} - -
+ <> +
+ + {message} + +
+ {/* Only a confirmed signature earns the card, and only while the flag is on. */} + {signed === "confirmed" && shareCardEnabled() ? : null} + ); } diff --git a/apps/site/src/lib/share-card/copy.ts b/apps/site/src/lib/share-card/copy.ts new file mode 100644 index 0000000000..b9c56a3142 --- /dev/null +++ b/apps/site/src/lib/share-card/copy.ts @@ -0,0 +1,58 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +// The supporter card's words and sizes, declared once. The copy is supplied +// verbatim by the brand owner: change it only on their word. The card carries +// no personal data, so the same image goes to every supporter. + +import { SITE_ORIGIN } from "../site-facts.ts"; + +export const SHARE_CARD_COPY = { + button: "Sign the pledge → pdpp.dev", + hashtag: "#PDPP", + statement: "My data, my rules.", + subtext: "I just signed the pledge for global rules on where my data goes and who trains AI on it.", +} as const; + +export const SHARE_CARD_FORMATS = { + feed: { height: 1350, width: 1080 }, + story: { height: 1920, width: 1080 }, +} as const; + +export type ShareCardFormat = keyof typeof SHARE_CARD_FORMATS; + +export const SHARE_CARD_FORMAT_NAMES = Object.keys(SHARE_CARD_FORMATS) as ShareCardFormat[]; + +export function isShareCardFormat(value: string): value is ShareCardFormat { + return Object.hasOwn(SHARE_CARD_FORMATS, value); +} + +export function shareCardPath(format: ShareCardFormat): string { + return `/principles/card/${format}`; +} + +/** The page every post links to. */ +export const SHARE_CARD_LINK = `${SITE_ORIGIN}/principles`; + +/** The alt text for the card image: the card's words, in reading order. */ +export const SHARE_CARD_ALT = `${SHARE_CARD_COPY.statement} ${SHARE_CARD_COPY.subtext} ${SHARE_CARD_COPY.button} ${SHARE_CARD_COPY.hashtag}`; + +const SHARE_CARD_CAPTION_LEAD = + "I just signed the pledge for global rules on where my data goes and who trains AI on it. Sign it too:"; + +/** The post text a supporter can copy, link included. */ +export const SHARE_CARD_CAPTION = `${SHARE_CARD_CAPTION_LEAD} ${SHARE_CARD_LINK} ${SHARE_CARD_COPY.hashtag}`; + +/** X adds the link after the text, so the text ends on "Sign it too:" and the hashtag leads. */ +export function xIntentUrl(): string { + const params = new URLSearchParams({ + text: `${SHARE_CARD_COPY.hashtag} ${SHARE_CARD_CAPTION_LEAD}`, + url: SHARE_CARD_LINK, + }); + return `https://x.com/intent/post?${params}`; +} + +/** LinkedIn's share URL takes a link and no text. */ +export function linkedInShareUrl(): string { + return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SHARE_CARD_LINK)}`; +} diff --git a/apps/site/src/lib/share-card/render.test.ts b/apps/site/src/lib/share-card/render.test.ts new file mode 100644 index 0000000000..696ebc10c7 --- /dev/null +++ b/apps/site/src/lib/share-card/render.test.ts @@ -0,0 +1,35 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +import assert from "node:assert/strict"; +import test from "node:test"; +import { WORDMARK_PATH } from "../../components/elements/icons.tsx"; +import { SHARE_CARD_ALT, SHARE_CARD_COPY, SHARE_CARD_LINK } from "./copy.ts"; +import { wordmarkSvg } from "./render.tsx"; + +const OKLCH = /oklch\(/; + +test("the card copy is the brand owner's, verbatim", () => { + assert.equal(SHARE_CARD_COPY.statement, "My data, my rules."); + assert.equal( + SHARE_CARD_COPY.subtext, + "I just signed the pledge for global rules on where my data goes and who trains AI on it." + ); + assert.equal(SHARE_CARD_COPY.button, "Sign the pledge → pdpp.dev"); + assert.equal(SHARE_CARD_COPY.hashtag, "#PDPP"); + assert.equal(SHARE_CARD_LINK, "https://pdpp.dev/principles"); +}); + +test("the card alt text carries every word on the card", () => { + for (const text of Object.values(SHARE_CARD_COPY)) { + assert.ok(SHARE_CARD_ALT.includes(text), text); + } +}); + +test("the wordmark is the header's path and viewBox, unmodified, in the primary colour", () => { + const svg = wordmarkSvg("#295171"); + assert.ok(svg.includes(` d="${WORDMARK_PATH}"`)); + assert.ok(svg.includes('viewBox="0 0 365 160"')); + assert.ok(svg.includes('fill="#295171"')); + assert.doesNotMatch(svg, OKLCH); +}); diff --git a/apps/site/src/lib/share-card/render.tsx b/apps/site/src/lib/share-card/render.tsx new file mode 100644 index 0000000000..da17a01c0e --- /dev/null +++ b/apps/site/src/lib/share-card/render.tsx @@ -0,0 +1,162 @@ +// Copyright The PDP-Connect Contributors +// SPDX-License-Identifier: Apache-2.0 + +import { readFile } from "node:fs/promises"; +import { join } from "node:path"; +import { ImageResponse } from "next/og"; +import type { ReactElement } from "react"; +import { WORDMARK_PATH } from "../../components/elements/icons.tsx"; +import { SHARE_CARD_COPY, SHARE_CARD_FORMATS, type ShareCardFormat } from "./copy.ts"; + +// Colours of the concept surface (the live site), as hex. Satori cannot parse oklch(), +// so each is the sRGB value of a light-scheme token in +// src/styles/surfaces/concept/tokens/primitive.css. Re-derive them if a token moves. +const PAPER = "#f4f5f6"; // --background = --pdpp-editorial-paper, oklch(0.97 0.001 245) +const INK = "#181b1d"; // --foreground = --pdpp-editorial-ink, oklch(0.22 0.006 245) +const MUTED = "#4e5052"; // --muted-foreground = --pdpp-editorial-ink-soft +const PRIMARY = "#295171"; // --primary = --pdpp-editorial-teal, oklch(0.42 0.07 245); also the header wordmark colour + +/** + * The header wordmark as the site draws it: the same path and viewBox as + * WordmarkIcon, filled with the site's primary colour (the header sets `text-primary`). + */ +export function wordmarkSvg(fill: string): string { + return ``; +} + +const ASSETS = join(process.cwd(), "assets", "share-card"); + +// Read once per process. The files ship with the repo; nothing is fetched. +const fonts = Promise.all([ + readFile(join(ASSETS, "Inter-Regular.ttf")), + readFile(join(ASSETS, "Inter-Bold.ttf")), + readFile(join(ASSETS, "SourceSerif4-Regular.ttf")), + readFile(join(ASSETS, "SourceSerif4-It.ttf")), +]); +const wordmarkDataUri = `data:image/svg+xml;base64,${Buffer.from(wordmarkSvg(PRIMARY)).toString("base64")}`; + +/** Per-format measurements. The design is the same; only the room around it changes. */ +interface Layout { + /** Space above and below the content; Stories keeps clear of the app's own header and reply bar. */ + padBottom: number; + padTop: number; + statementSize: number; +} + +const LAYOUTS: Record = { + feed: { padBottom: 80, padTop: 80, statementSize: 168 }, + story: { padBottom: 280, padTop: 250, statementSize: 184 }, +}; + +interface DesignProps { + layout: Layout; + wordmark: string; +} + +// The wordmark's box is 365 x 160 (see WordmarkIcon). +const WORDMARK_HEIGHT = 56; +const WORDMARK_WIDTH = Math.round((WORDMARK_HEIGHT * 365) / 160); + +/** + * The card's designs. Adding another is a new entry here and a new value of + * `ShareCardVariant`; the route, sizes, fonts and copy do not change. + * + * It follows the concept surface: flat paper, ink type, a serif statement and + * sans controls and square corners. + */ +function EditorialDesign({ layout, wordmark }: DesignProps): ReactElement { + const side = 88; + return ( +
+
+ +
+ +
+
+
My data,
+
my rules.
+
+
+ {SHARE_CARD_COPY.subtext} +
+
+ +
+
+ {SHARE_CARD_COPY.button} +
+
+ {SHARE_CARD_COPY.hashtag} +
+
+
+ ); +} + +const DESIGNS = { editorial: EditorialDesign } as const; + +export type ShareCardVariant = keyof typeof DESIGNS; +export const DEFAULT_SHARE_CARD_VARIANT: ShareCardVariant = "editorial"; + +export async function renderShareCard( + format: ShareCardFormat, + variant: ShareCardVariant = DEFAULT_SHARE_CARD_VARIANT +): Promise { + const [interRegular, interBold, serifRegular, serifItalic] = await fonts; + const Design = DESIGNS[variant]; + return new ImageResponse(, { + ...SHARE_CARD_FORMATS[format], + fonts: [ + { data: interRegular, name: "Inter", style: "normal", weight: 400 }, + { data: interBold, name: "Inter", style: "normal", weight: 700 }, + { data: serifRegular, name: "Source Serif 4", style: "normal", weight: 400 }, + { data: serifItalic, name: "Source Serif 4", style: "italic", weight: 400 }, + ], + }); +} diff --git a/apps/site/src/lib/site-config.ts b/apps/site/src/lib/site-config.ts index e8f3781387..dbe1210016 100644 --- a/apps/site/src/lib/site-config.ts +++ b/apps/site/src/lib/site-config.ts @@ -61,6 +61,18 @@ export const siteFlags = { signingLive: flag(process.env.NEXT_PUBLIC_PDPP_SIGNING_LIVE), } as const; +/** + * The shareable supporter card (the panel after signing and the /principles/card + * routes). Off unless the variable is "true", like the other site flags: + * production stays off until + * the brand-mark use is cleared with LF Decentralized Trust. A function rather + * than a `siteFlags` entry so it reads the variable when called, which lets a + * test switch it; Next still inlines the NEXT_PUBLIC value at build. + */ +export function shareCardEnabled(): boolean { + return flag(process.env.NEXT_PUBLIC_PDPP_SHARE_CARD); +} + export const siteConfig = { /** Where the Supporter form posts. Same-origin by default. */ formEndpoint: configured(process.env.NEXT_PUBLIC_PDPP_FORM_ENDPOINT, "form endpoint not set"),