@automattic/social-previews 3.0.8 → 3.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +63 -0
- package/CHANGELOG.md +5 -0
- package/package.json +1 -1
package/AGENTS.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# AGENTS.md
|
|
2
|
+
|
|
3
|
+
This file provides guidance to AI coding agents when working with code in this repository.
|
|
4
|
+
|
|
5
|
+
## Essential Documentation
|
|
6
|
+
|
|
7
|
+
**Primary Reference**: [Social Previews README.md](./README.md) - Package overview and usage examples
|
|
8
|
+
|
|
9
|
+
## Project Overview
|
|
10
|
+
|
|
11
|
+
Social Previews is a React component library that renders visual previews of how a post will appear when shared on various social media platforms. Published as `@automattic/social-previews` on npm.
|
|
12
|
+
|
|
13
|
+
This package is consumed by the Publicize package (`projects/packages/publicize/`) to show previews in the block editor sidebar. It is also used by the Jetpack plugin (`projects/plugins/jetpack/`) to show the site SEO search preview.
|
|
14
|
+
|
|
15
|
+
## Platform Preview Pattern
|
|
16
|
+
|
|
17
|
+
Each supported platform follows a consistent directory structure under `src/`:
|
|
18
|
+
|
|
19
|
+
```text
|
|
20
|
+
src/{platform}-preview/
|
|
21
|
+
├── index.tsx # Exports (re-exports components and types)
|
|
22
|
+
├── previews.tsx # Container: renders both post and link previews with section headings
|
|
23
|
+
├── post-preview.tsx # "Your post" preview — how the shared post appears in a feed
|
|
24
|
+
├── link-preview.tsx # "Link preview" — how a shared link card appears (optional for some platforms)
|
|
25
|
+
├── types.ts # Platform-specific prop types extending SocialPreviewBaseProps
|
|
26
|
+
├── style.scss # Platform-specific styles
|
|
27
|
+
└── helpers.ts # Utility functions (optional)
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The Facebook preview (`src/facebook-preview/`) is the most complete reference implementation of this pattern.
|
|
31
|
+
|
|
32
|
+
### Shared Types
|
|
33
|
+
|
|
34
|
+
`src/types.ts` defines the base interfaces:
|
|
35
|
+
- `SocialPreviewBaseProps` — Common props: `url`, `title`, `description`, `image`, `media`, `caption`
|
|
36
|
+
- `SocialPreviewsBaseProps` — Container-level props: `headingLevel`, `hidePostPreview`, `hideLinkPreview`
|
|
37
|
+
- `MediaItem` — Media attachment type: `url`, `type` (MIME), `alt`
|
|
38
|
+
|
|
39
|
+
### Shared Components
|
|
40
|
+
|
|
41
|
+
`src/shared/` contains reusable UI primitives used across platform previews (section headings, etc).
|
|
42
|
+
|
|
43
|
+
## Supported Platforms
|
|
44
|
+
|
|
45
|
+
Each platform has its own `src/{platform}-preview/` directory. See `src/index.ts` for the current list of exported platforms.
|
|
46
|
+
|
|
47
|
+
## Adding a New Platform
|
|
48
|
+
|
|
49
|
+
1. Create `src/{platform}-preview/` directory following the pattern above
|
|
50
|
+
2. Define platform-specific types extending `SocialPreviewBaseProps` in `types.ts`
|
|
51
|
+
3. Implement `post-preview.tsx` (required) and `link-preview.tsx` (if the platform shows link cards)
|
|
52
|
+
4. Create `previews.tsx` container that composes both preview types with section headings
|
|
53
|
+
5. Export everything from `index.tsx`
|
|
54
|
+
6. Add the export to `src/index.ts`
|
|
55
|
+
7. Add styles in `style.scss` — use `src/variables.scss` for shared design tokens
|
|
56
|
+
|
|
57
|
+
## Testing
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
jetpack test js js-packages/social-previews # Run Jest tests
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Tests live under the `tests/` directory. Use React Testing Library for component tests.
|
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [3.0.9] - 2026-02-19
|
|
9
|
+
### Changed
|
|
10
|
+
- Internal updates.
|
|
11
|
+
|
|
8
12
|
## [3.0.8] - 2026-02-18
|
|
9
13
|
### Added
|
|
10
14
|
- Add notice for Threads link preview when no image is provided. [#47142]
|
|
@@ -128,6 +132,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
128
132
|
|
|
129
133
|
- Initial release after extracting from Calypso.
|
|
130
134
|
|
|
135
|
+
[3.0.9]: https://github.com/Automattic/social-previews/compare/v3.0.8...v3.0.9
|
|
131
136
|
[3.0.8]: https://github.com/Automattic/social-previews/compare/v3.0.7...v3.0.8
|
|
132
137
|
[3.0.7]: https://github.com/Automattic/social-previews/compare/v3.0.6...v3.0.7
|
|
133
138
|
[3.0.6]: https://github.com/Automattic/social-previews/compare/v3.0.5...v3.0.6
|