Skip to content

Commit 9d94222

Browse files
boojackboojack
committed
chore: redesign social previews
1 parent b4027d6 commit 9d94222

16 files changed

Lines changed: 370 additions & 112 deletions

‎DESIGN_SYSTEM.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@ the current code pass.
7878

7979
## 4. How an agent uses this system
8080

81+
### Social preview artwork
82+
83+
At the user's request, generated social previews abstract the Cloud campaign's sky, clouds, and birds through a flat cut-paper composition informed by modern abstract painting. This scope covers `src/shared/content/social-preview-image.tsx`, its artwork, and the default `/og-image.png`. Use a cobalt sky, oversized ivory cloud shapes, and birds reduced to asymmetric wing silhouettes. No eyes, feather detail, outlines, gradients, texture filters, or simulated depth. The original SVG must contain no embedded bitmaps.
84+
85+
Use Fraunces Black for both the title and the text-only Memos wordmark; Inter carries supporting copy. The wordmark sits independently at the lower left, aligned with the title and description. Omit section labels from the image rather than pairing mismatched type next to the brand. Keep the left text column clear of illustration and reserve the right side for an asymmetric, cropped composition. No logo icon or text shadows. This exception to sections 10–11 applies only to the fixed 1200 × 630 social image, not page styles. Serve PNG from the shared template for social crawler compatibility, and keep representative generated images below 300 KB. Verify short and long titles at full and card size.
86+
8187
Before editing a public page, the agent MUST:
8288

8389
1. Read the page's real content and identify its audience and single primary

‎docs/architecture.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ infrastructure or a committed product roadmap.
3232
| `(app)` | Overview and connection settings; Clerk provider and account shell | Static client-auth shells, noindex |
3333
| `api/search` | Public docs search index, searched in the browser | Static |
3434
| `og/` | Generated Docs, Blog, and Changelog social images | Static, `nodejs` runtime |
35+
| `og-image.png` | Default social image, using the same SVG sky and text-only wordmark template | Static, `nodejs` runtime |
3536
| `llms.txt`, `llms-full.txt`, `llms.mdx/[...slug]` | Public content indexes and Markdown exports | Static |
3637

3738
The site also generates `sitemap.xml` and `/blog/feed.xml`. There is no `(auth)`

‎next.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const API_DOCS_RETIRED_REDIRECTS =
4848
},
4949
];
5050

51-
// Applied only to the OG image routes below. Cloudflare serves the static
52-
// /og-image.png from public/_headers — keep that file's CORS block in sync.
51+
// Applied only to the statically generated OG image routes below. Keep the
52+
// matching Cloudflare asset headers in public/_headers in sync.
5353
const CORS_HEADERS = [
5454
{
5555
key: "Access-Control-Allow-Origin",

‎public/_headers‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
Cache-Control: public,max-age=31536000,immutable
2424

2525
# CORS for OG images: keep in sync with CORS_HEADERS in next.config.mjs,
26-
# which covers the dynamic /og/:path* routes.
26+
# which covers the generated /og-image.png and /og/:path* routes.
2727
/og-image.png
2828
Cache-Control: public,max-age=86400,stale-while-revalidate=604800
2929
Access-Control-Allow-Origin: *

‎public/og-image.png‎

-283 KB
Binary file not shown.

‎scripts/smoke-test.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const checks = [
4545
cacheControlIncludes: "max-age=31536000",
4646
openNextCacheAbsent: true,
4747
},
48+
{ path: "/og-image.png", type: "png", cacheControlIncludes: "max-age=86400", openNextCache: "HIT" },
4849
{ path: "/og/blog/best-practices-to-write-tag/image.png", type: "png" },
4950
{ path: "/og/blog/20k-github-stars-in-2-years/image.png", status: 404, type: "html" },
5051
{

‎src/app/og-image.png/route.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { createSocialPreviewImage } from "@/shared/content/social-preview-image";
2+
3+
export const runtime = "nodejs";
4+
export const dynamic = "force-static";
5+
export const revalidate = false;
6+
7+
export async function GET() {
8+
const response = await createSocialPreviewImage({
9+
title: "Capture first.\nKeep it yours.",
10+
description: "An open-source, self-hosted notebook. Capture what matters, and keep it yours.",
11+
});
12+
response.headers.set("Cache-Control", "public,max-age=86400,stale-while-revalidate=604800");
13+
return response;
14+
}

‎src/shared/content/fonts/OFL-Fraunces.txt‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright 2018 The Fraunces Project Authors (https://github.com/undercasetype/Fraunces)
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
http://scripts.sil.org/OFL
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎src/shared/content/fonts/OFL-Inter.txt‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
2+
3+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
4+
This license is copied below, and is also available with a FAQ at:
5+
https://scripts.sil.org/OFL
6+
7+
8+
-----------------------------------------------------------
9+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10+
-----------------------------------------------------------
11+
12+
PREAMBLE
13+
The goals of the Open Font License (OFL) are to stimulate worldwide
14+
development of collaborative font projects, to support the font creation
15+
efforts of academic and linguistic communities, and to provide a free and
16+
open framework in which fonts may be shared and improved in partnership
17+
with others.
18+
19+
The OFL allows the licensed fonts to be used, studied, modified and
20+
redistributed freely as long as they are not sold by themselves. The
21+
fonts, including any derivative works, can be bundled, embedded,
22+
redistributed and/or sold with any software provided that any reserved
23+
names are not used by derivative works. The fonts and derivatives,
24+
however, cannot be released under any other type of license. The
25+
requirement for fonts to remain under this license does not apply
26+
to any document created using the fonts or their derivatives.
27+
28+
DEFINITIONS
29+
"Font Software" refers to the set of files released by the Copyright
30+
Holder(s) under this license and clearly marked as such. This may
31+
include source files, build scripts and documentation.
32+
33+
"Reserved Font Name" refers to any names specified as such after the
34+
copyright statement(s).
35+
36+
"Original Version" refers to the collection of Font Software components as
37+
distributed by the Copyright Holder(s).
38+
39+
"Modified Version" refers to any derivative made by adding to, deleting,
40+
or substituting -- in part or in whole -- any of the components of the
41+
Original Version, by changing formats or by porting the Font Software to a
42+
new environment.
43+
44+
"Author" refers to any designer, engineer, programmer, technical
45+
writer or other person who contributed to the Font Software.
46+
47+
PERMISSION & CONDITIONS
48+
Permission is hereby granted, free of charge, to any person obtaining
49+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
50+
redistribute, and sell modified and unmodified copies of the Font
51+
Software, subject to the following conditions:
52+
53+
1) Neither the Font Software nor any of its individual components,
54+
in Original or Modified Versions, may be sold by itself.
55+
56+
2) Original or Modified Versions of the Font Software may be bundled,
57+
redistributed and/or sold with any software, provided that each copy
58+
contains the above copyright notice and this license. These can be
59+
included either as stand-alone text files, human-readable headers or
60+
in the appropriate machine-readable metadata fields within text or
61+
binary files as long as those fields can be easily viewed by the user.
62+
63+
3) No Modified Version of the Font Software may use the Reserved Font
64+
Name(s) unless explicit written permission is granted by the corresponding
65+
Copyright Holder. This restriction only applies to the primary font name as
66+
presented to the users.
67+
68+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69+
Software shall not be used to promote, endorse or advertise any
70+
Modified Version, except to acknowledge the contribution(s) of the
71+
Copyright Holder(s) and the Author(s) or with their explicit written
72+
permission.
73+
74+
5) The Font Software, modified or unmodified, in part or in whole,
75+
must be distributed entirely under this license, and must not be
76+
distributed under any other license. The requirement for fonts to
77+
remain under this license does not apply to any document created
78+
using the Font Software.
79+
80+
TERMINATION
81+
This license becomes null and void if any of the above conditions are
82+
not met.
83+
84+
DISCLAIMER
85+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93+
OTHER DEALINGS IN THE FONT SOFTWARE.

‎src/shared/content/fonts/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Social preview fonts
2+
3+
Local static TTF subsets keep social-image builds independent of font services.
4+
The accompanying SIL Open Font License files cover both families.
5+
6+
- **Fraunces Black**: weight 900, optical size 9, matching Cloud's heavy wordmark.
7+
Used for the wordmark and headlines. Source: [Google Fonts](https://fonts.google.com/specimen/Fraunces).
8+
- **Inter Regular**: weight 400 for descriptions.
9+
Sources: [Google Fonts](https://fonts.google.com/specimen/Inter).
10+
Included ranges: `U+0000-024F,U+0300-036F,U+2000-206F,U+20A0-20CF,U+2190-21FF`.
11+
12+
Subsets were produced with FontTools, preserving name records and font licenses.
13+
To refresh, download static TTFs for these weights (not WOFF2 or variable fonts),
14+
then use `pyftsubset` with `--unicodes` and the ranges above for both families, plus `--name-IDs='*' --name-legacy --name-languages='*'`.
15+
If content introduces another writing system, extend the font subsets before
16+
publishing it. The PNG render tests exercise the local fonts without network access.

0 commit comments

Comments
 (0)