@automattic/social-previews 2.0.1 → 2.1.0-beta.2

package/dist/types/helpers.d.ts

@@ -17,9 +17,10 @@ export declare const stripHtmlTags: Formatter<Array<string>>;
 export declare const getTitleFromDescription: (description: string) => string;
 export declare const hasTag: (text: string, tag: string) => boolean;
 export declare const formatNextdoorDate: (date?: number | Date | undefined) => string;
+export declare const formatThreadsDate: (date?: number | Date | undefined) => string;
 export declare const formatTweetDate: (date?: number | Date | undefined) => string;
 export declare const formatMastodonDate: (date?: number | Date | undefined) => string;
-export type Platform = 'twitter' | 'facebook' | 'linkedin' | 'instagram' | 'mastodon' | 'nextdoor';
+export type Platform = 'twitter' | 'facebook' | 'linkedin' | 'instagram' | 'mastodon' | 'nextdoor' | 'threads';
 type PreviewTextOptions = {
     platform: Platform;
     maxChars?: number;

package/dist/types/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,CAAE,OAAO,GAAG,OAAO,IAAK,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAM,MAAM,CAAC;AAC3F,KAAK,0BAA0B,CAAE,CAAC,SAAS,SAAS,EAAE,UAAU,IAAK,CACpE,GAAG,CAAC,EAAE,UAAU,CAAE,CAAC,CAAE,KACjB,UAAU,CAAE,CAAC,CAAE,GAAG,UAAU,CAAC;AAClC,KAAK,oBAAoB,GAAG,0BAA0B,CAAE,SAAS,EAAE,OAAO,CAAE,CAAC;AAC7E,KAAK,iBAAiB,GAAG,0BAA0B,CAAE,SAAS,EAAE,SAAS,CAAE,CAAC;AAE5E,eAAO,MAAM,UAAU,QAAU,MAAM,KAAI,MAGlB,CAAC;AAE1B,eAAO,MAAM,WAAW,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,oBACL,CAAC;AAEvC,eAAO,MAAM,gBAAgB,EAAE,CAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAM,oBAQzD,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,SACR,CAAC;AAEvC,eAAO,MAAM,UAAU,EAAE,CAAE,GAAG,IAAI,EAAE,oBAAoB,EAAE,KAAM,iBAGM,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,SAAS,CAAE,KAAK,CAAE,MAAM,CAAE,CAIrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,gBAAkB,MAAM,KAAI,MAE/D,CAAC;AAEF,eAAO,MAAM,MAAM,SAAW,MAAM,OAAO,MAAM,KAAI,OAIpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,8CAIrB,CAAC;AAEX,eAAO,MAAM,eAAe,8CAIlB,CAAC;AAEX,eAAO,MAAM,kBAAkB,8CAKrB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnG,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAE,QAAQ,EAAE,MAAM,CAOnD,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,GAAI,KAAK,CAAC,SAAS,CAoH/F"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/helpers.tsx"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,CAAE,OAAO,GAAG,OAAO,IAAK,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAM,MAAM,CAAC;AAC3F,KAAK,0BAA0B,CAAE,CAAC,SAAS,SAAS,EAAE,UAAU,IAAK,CACpE,GAAG,CAAC,EAAE,UAAU,CAAE,CAAC,CAAE,KACjB,UAAU,CAAE,CAAC,CAAE,GAAG,UAAU,CAAC;AAClC,KAAK,oBAAoB,GAAG,0BAA0B,CAAE,SAAS,EAAE,OAAO,CAAE,CAAC;AAC7E,KAAK,iBAAiB,GAAG,0BAA0B,CAAE,SAAS,EAAE,SAAS,CAAE,CAAC;AAE5E,eAAO,MAAM,UAAU,QAAU,MAAM,KAAI,MAGlB,CAAC;AAE1B,eAAO,MAAM,WAAW,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,oBACL,CAAC;AAEvC,eAAO,MAAM,gBAAgB,EAAE,CAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAM,oBAQzD,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,CAAE,CAAC,EAAE,MAAM,KAAM,SACR,CAAC;AAEvC,eAAO,MAAM,UAAU,EAAE,CAAE,GAAG,IAAI,EAAE,oBAAoB,EAAE,KAAM,iBAGM,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,SAAS,CAAE,KAAK,CAAE,MAAM,CAAE,CAIrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,gBAAkB,MAAM,KAAI,MAE/D,CAAC;AAEF,eAAO,MAAM,MAAM,SAAW,MAAM,OAAO,MAAM,KAAI,OAIpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,8CAIrB,CAAC;AAEX,eAAO,MAAM,iBAAiB,8CAKpB,CAAC;AAEX,eAAO,MAAM,eAAe,8CAIlB,CAAC;AAEX,eAAO,MAAM,kBAAkB,8CAKrB,CAAC;AAEX,MAAM,MAAM,QAAQ,GACjB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AAEb,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAE,QAAQ,EAAE,MAAM,CAQnD,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,GAAI,KAAK,CAAC,SAAS,CAoH/F"}

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@ export * from './tumblr-preview';
 export * from './facebook-preview';
 export * from './mastodon-preview';
 export * from './nextdoor-preview';
+export * from './threads-preview';
 export * from './constants';
 export * from './instagram-preview';
 export * from './types';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}

package/dist/types/threads-preview/card.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ThreadsCardProps } from './types';
+export declare const Card: React.FC<ThreadsCardProps>;
+//# sourceMappingURL=card.d.ts.map

package/dist/types/threads-preview/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/card.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAE,gBAAgB,CAgB5C,CAAC"}

package/dist/types/threads-preview/footer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Footer: React.FC;
+//# sourceMappingURL=footer.d.ts.map

package/dist/types/threads-preview/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/footer.tsx"],"names":[],"mappings":";AAAA,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EA0C1B,CAAC"}

package/dist/types/threads-preview/header.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderProps } from './types';
+export declare const Header: React.FC<HeaderProps>;
+//# sourceMappingURL=header.d.ts.map

package/dist/types/threads-preview/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAE,WAAW,CAazC,CAAC"}

package/dist/types/threads-preview/helpers.d.ts

@@ -0,0 +1,3 @@
+import { Formatter } from '../helpers';
+export declare const threadsTitle: Formatter;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/types/threads-preview/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0D,SAAS,EAAE,MAAM,YAAY,CAAC;AAI/F,eAAO,MAAM,YAAY,EAAE,SAIM,CAAC"}

package/dist/types/threads-preview/icons/default-avatar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DefaultAvatar: React.FC;
+//# sourceMappingURL=default-avatar.d.ts.map

package/dist/types/threads-preview/icons/default-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-avatar.d.ts","sourceRoot":"","sources":["../../../../src/threads-preview/icons/default-avatar.tsx"],"names":[],"mappings":";AAAA,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAkCjC,CAAC"}

package/dist/types/threads-preview/index.d.ts

@@ -0,0 +1,4 @@
+export * from './link-preview';
+export * from './post-preview';
+export * from './previews';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/threads-preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC"}

package/dist/types/threads-preview/link-preview.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ThreadsPreviewProps } from './types';
+export declare const ThreadsLinkPreview: React.FC<ThreadsPreviewProps>;
+//# sourceMappingURL=link-preview.d.ts.map

package/dist/types/threads-preview/link-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-preview.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/link-preview.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAE,mBAAmB,CAS7D,CAAC"}

package/dist/types/threads-preview/media.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MediaProps } from './types';
+export declare const Media: React.FC<MediaProps>;
+//# sourceMappingURL=media.d.ts.map

package/dist/types/threads-preview/media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/media.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAE,UAAU,CAwDvC,CAAC"}

package/dist/types/threads-preview/post-preview.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ThreadsPreviewProps } from './types';
+import './style.scss';
+export declare const ThreadsPostPreview: React.FC<ThreadsPreviewProps>;
+//# sourceMappingURL=post-preview.d.ts.map

package/dist/types/threads-preview/post-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-preview.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/post-preview.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAE,mBAAmB,CA+C7D,CAAC"}

package/dist/types/threads-preview/previews.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ThreadsPreviewsProps } from './types';
+export declare const ThreadsPreviews: React.FC<ThreadsPreviewsProps>;
+//# sourceMappingURL=previews.d.ts.map

package/dist/types/threads-preview/previews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previews.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/previews.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAE,oBAAoB,CAqE3D,CAAC"}

package/dist/types/threads-preview/sidebar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SidebarProps } from './types';
+export declare const Sidebar: React.FC<SidebarProps>;
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/types/threads-preview/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/sidebar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAE,YAAY,CAa3C,CAAC"}

package/dist/types/threads-preview/types.d.ts

@@ -0,0 +1,22 @@
+import { MediaItem, SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
+export type ThreadsPreviewsProps = SocialPreviewsBaseProps & {
+    posts: Array<ThreadsPreviewProps>;
+};
+export type ThreadsCardProps = SocialPreviewBaseProps;
+export type SidebarProps = {
+    showThreadConnector?: boolean;
+    profileImage?: string;
+};
+export type HeaderProps = {
+    name?: string;
+    date?: Date;
+};
+export type MediaProps = {
+    media: Array<MediaItem>;
+};
+export type TextProps = {
+    text: string;
+    url: string;
+};
+export type ThreadsPreviewProps = SidebarProps & HeaderProps & Partial<ThreadsCardProps & Pick<TextProps, 'text'>>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/threads-preview/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/threads-preview/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEtF,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG;IAC5D,KAAK,EAAE,KAAK,CAAE,mBAAmB,CAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,KAAK,CAAE,SAAS,CAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAC7C,WAAW,GACX,OAAO,CAAE,gBAAgB,GAAG,IAAI,CAAE,SAAS,EAAE,MAAM,CAAE,CAAE,CAAC"}

package/package.json

@@ -1,72 +1,73 @@
 {
-	"name": "@automattic/social-previews",
-	"version": "2.0.1",
-	"description": "A suite of components to generate previews for a post for both social and search engines.",
-	"main": "dist/cjs/index.js",
-	"module": "dist/esm/index.js",
-	"calypso:src": "src/index.ts",
-	"sideEffects": [
-		"*.css",
-		"*.scss"
-	],
-	"keywords": [
-		"wordpress",
-		"social",
-		"seo",
-		"search"
-	],
-	"author": "Automattic Inc.",
-	"homepage": "https://github.com/Automattic/wp-calypso",
-	"license": "GPL-2.0-or-later",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Automattic/wp-calypso.git",
-		"directory": "packages/social-previews"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"bugs": "https://github.com/Automattic/wp-calypso/issues",
-	"files": [
-		"dist",
-		"src"
-	],
-	"types": "dist/types",
-	"scripts": {
-		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
-		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
-		"prepare": "yarn run build",
-		"prepack": "yarn run clean && yarn run build",
-		"watch": "tsc --build ./tsconfig.json --watch"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.11.1",
-		"@wordpress/components": "^28.0.0",
-		"@wordpress/element": "^6.0.0",
-		"@wordpress/i18n": "^5.0.0",
-		"clsx": "^2.1.1",
-		"prop-types": "^15.7.2",
-		"tslib": "^2.3.0"
-	},
-	"devDependencies": {
-		"@automattic/calypso-build": "workspace:^",
-		"@automattic/calypso-typescript-config": "workspace:^",
-		"@testing-library/jest-dom": "^6.4.5",
-		"@testing-library/react": "^15.0.7",
-		"postcss": "^8.4.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"typescript": "^5.3.3",
-		"webpack": "^5.91.0"
-	},
-	"peerDependencies": {
-		"@babel/runtime": "^7.24.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"peerDependenciesMeta": {
-		"@babel/runtime": {
-			"optional": true
-		}
-	}
-}
+  "name": "@automattic/social-previews",
+  "version": "2.1.0-beta.2",
+  "description": "A suite of components to generate previews for a post for both social and search engines.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "calypso:src": "src/index.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "keywords": [
+    "wordpress",
+    "social",
+    "seo",
+    "search"
+  ],
+  "author": "Automattic Inc.",
+  "homepage": "https://github.com/Automattic/wp-calypso",
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/social-previews"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md"
+  ],
+  "types": "dist/types",
+  "scripts": {
+    "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+    "prepare": "yarn run build",
+    "prepack": "yarn run clean && yarn run build",
+    "watch": "tsc --build ./tsconfig.json --watch"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@wordpress/components": "^28.0.0",
+    "@wordpress/element": "^6.0.0",
+    "@wordpress/i18n": "^5.0.0",
+    "clsx": "^2.1.1",
+    "prop-types": "^15.7.2",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@automattic/calypso-build": "^10.0.0",
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "postcss": "^8.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "webpack": "^5.91.0"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.24.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/runtime": {
+      "optional": true
+    }
+  }
+}

package/src/helpers.tsx

@@ -61,6 +61,13 @@ export const formatNextdoorDate = new Intl.DateTimeFormat( 'en-GB', {
 	month: 'short',
 } ).format;
 
+export const formatThreadsDate = new Intl.DateTimeFormat( 'en-US', {
+	// Result: "'06/21/2024"
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+} ).format;
+
 export const formatTweetDate = new Intl.DateTimeFormat( 'en-US', {
 	// Result: "Apr 7", "Dec 31"
 	month: 'short',
@@ -74,7 +81,14 @@ export const formatMastodonDate = new Intl.DateTimeFormat( 'en-US', {
 	year: 'numeric',
 } ).format;
 
-export type Platform = 'twitter' | 'facebook' | 'linkedin' | 'instagram' | 'mastodon' | 'nextdoor';
+export type Platform =
+	| 'twitter'
+	| 'facebook'
+	| 'linkedin'
+	| 'instagram'
+	| 'mastodon'
+	| 'nextdoor'
+	| 'threads';
 
 type PreviewTextOptions = {
 	platform: Platform;
@@ -92,6 +106,7 @@ export const hashtagUrlMap: Record< Platform, string > = {
 	instagram: 'https://www.instagram.com/explore/tags/%1$s',
 	mastodon: 'https://%2$s/tags/%1$s',
 	nextdoor: 'https://nextdoor.com/hashtag/%1$s',
+	threads: 'https://www.threads.net/search?q=%1$s&serp_type=tags',
 };
 
 /**

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './tumblr-preview';
 export * from './facebook-preview';
 export * from './mastodon-preview';
 export * from './nextdoor-preview';
+export * from './threads-preview';
 export * from './constants';
 export * from './instagram-preview';
 export * from './types';

package/src/threads-preview/card.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import { baseDomain } from '../helpers';
+import { threadsTitle } from './helpers';
+import { ThreadsCardProps } from './types';
+
+export const Card: React.FC< ThreadsCardProps > = ( { image, title, url } ) => {
+	const cardClassNames = clsx( {
+		'threads-preview__card-has-image': !! image,
+	} );
+
+	return (
+		<div className="threads-preview__card">
+			<div className={ cardClassNames }>
+				{ image && <img className="threads-preview__card-image" src={ image } alt="" /> }
+				<div className="threads-preview__card-body">
+					<div className="threads-preview__card-url">{ baseDomain( url || '' ) }</div>
+					<div className="threads-preview__card-title">{ threadsTitle( title ) }</div>
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/threads-preview/footer.tsx

@@ -0,0 +1,43 @@
+export const Footer: React.FC = () => {
+	return (
+		<div className="threads-preview__footer">
+			<span className="threads-preview__icon--like">
+				<svg role="img" viewBox="0 0 18 18">
+					<path
+						d="M1.34375 7.53125L1.34375 7.54043C1.34374 8.04211 1.34372 8.76295 1.6611 9.65585C1.9795 10.5516 2.60026 11.5779 3.77681 12.7544C5.59273 14.5704 7.58105 16.0215 8.33387 16.5497C8.73525 16.8313 9.26573 16.8313 9.66705 16.5496C10.4197 16.0213 12.4074 14.5703 14.2232 12.7544C15.3997 11.5779 16.0205 10.5516 16.3389 9.65585C16.6563 8.76296 16.6563 8.04211 16.6562 7.54043V7.53125C16.6562 5.23466 15.0849 3.25 12.6562 3.25C11.5214 3.25 10.6433 3.78244 9.99228 4.45476C9.59009 4.87012 9.26356 5.3491 9 5.81533C8.73645 5.3491 8.40991 4.87012 8.00772 4.45476C7.35672 3.78244 6.47861 3.25 5.34375 3.25C2.9151 3.25 1.34375 5.23466 1.34375 7.53125Z"
+						strokeWidth="1.25"
+					></path>
+				</svg>
+			</span>
+			<span className="threads-preview__icon--reply">
+				<svg role="img" viewBox="0 0 18 18">
+					<path
+						d="M15.376 13.2177L16.2861 16.7955L12.7106 15.8848C12.6781 15.8848 12.6131 15.8848 12.5806 15.8848C11.3779 16.5678 9.94767 16.8931 8.41995 16.7955C4.94194 16.5353 2.08152 13.7381 1.72397 10.2578C1.2689 5.63919 5.13697 1.76863 9.75264 2.22399C13.2307 2.58177 16.0261 5.41151 16.2861 8.92429C16.4161 10.453 16.0586 11.8841 15.376 13.0876C15.376 13.1526 15.376 13.1852 15.376 13.2177Z"
+						strokeLinejoin="round"
+						strokeWidth="1.25"
+					></path>
+				</svg>
+			</span>
+			<span className="threads-preview__icon--repost">
+				<svg role="img" viewBox="0 0 18 18">
+					<path d="M6.41256 1.23531C6.6349 0.971277 7.02918 0.937481 7.29321 1.15982L9.96509 3.40982C10.1022 3.52528 10.1831 3.69404 10.1873 3.87324C10.1915 4.05243 10.1186 4.2248 9.98706 4.34656L7.31518 6.81971C7.06186 7.05419 6.66643 7.03892 6.43196 6.7856C6.19748 6.53228 6.21275 6.13685 6.46607 5.90237L7.9672 4.51289H5.20312C3.68434 4.51289 2.45312 5.74411 2.45312 7.26289V9.51289V11.7629C2.45312 13.2817 3.68434 14.5129 5.20312 14.5129C5.5483 14.5129 5.82812 14.7927 5.82812 15.1379C5.82812 15.4831 5.5483 15.7629 5.20312 15.7629C2.99399 15.7629 1.20312 13.972 1.20312 11.7629V9.51289V7.26289C1.20312 5.05375 2.99399 3.26289 5.20312 3.26289H7.85002L6.48804 2.11596C6.22401 1.89362 6.19021 1.49934 6.41256 1.23531Z"></path>
+					<path d="M11.5874 17.7904C11.3651 18.0545 10.9708 18.0883 10.7068 17.8659L8.03491 15.6159C7.89781 15.5005 7.81687 15.3317 7.81267 15.1525C7.80847 14.9733 7.8814 14.801 8.01294 14.6792L10.6848 12.206C10.9381 11.9716 11.3336 11.9868 11.568 12.2402C11.8025 12.4935 11.7872 12.8889 11.5339 13.1234L10.0328 14.5129H12.7969C14.3157 14.5129 15.5469 13.2816 15.5469 11.7629V9.51286V7.26286C15.5469 5.74408 14.3157 4.51286 12.7969 4.51286C12.4517 4.51286 12.1719 4.23304 12.1719 3.88786C12.1719 3.54269 12.4517 3.26286 12.7969 3.26286C15.006 3.26286 16.7969 5.05373 16.7969 7.26286V9.51286V11.7629C16.7969 13.972 15.006 15.7629 12.7969 15.7629H10.15L11.512 16.9098C11.776 17.1321 11.8098 17.5264 11.5874 17.7904Z"></path>
+				</svg>
+			</span>
+			<span className="threads-preview__icon--share">
+				<svg role="img" viewBox="0 0 18 18">
+					<path
+						d="M15.6097 4.09082L6.65039 9.11104"
+						strokeLinejoin="round"
+						strokeWidth="1.25"
+					></path>
+					<path
+						d="M7.79128 14.439C8.00463 15.3275 8.11131 15.7718 8.33426 15.932C8.52764 16.071 8.77617 16.1081 9.00173 16.0318C9.26179 15.9438 9.49373 15.5501 9.95761 14.7628L15.5444 5.2809C15.8883 4.69727 16.0603 4.40546 16.0365 4.16566C16.0159 3.95653 15.9071 3.76612 15.7374 3.64215C15.5428 3.5 15.2041 3.5 14.5267 3.5H3.71404C2.81451 3.5 2.36474 3.5 2.15744 3.67754C1.97758 3.83158 1.88253 4.06254 1.90186 4.29856C1.92415 4.57059 2.24363 4.88716 2.88259 5.52032L6.11593 8.7243C6.26394 8.87097 6.33795 8.94431 6.39784 9.02755C6.451 9.10144 6.4958 9.18101 6.53142 9.26479C6.57153 9.35916 6.59586 9.46047 6.64451 9.66309L7.79128 14.439Z"
+						strokeLinejoin="round"
+						strokeWidth="1.25"
+					></path>
+				</svg>
+			</span>
+		</div>
+	);
+};

package/src/threads-preview/header.tsx

@@ -0,0 +1,18 @@
+import { __ } from '@wordpress/i18n';
+import { formatThreadsDate } from '../helpers';
+import { HeaderProps } from './types';
+
+export const Header: React.FC< HeaderProps > = ( { name, date } ) => {
+	const postDate = date || new Date();
+
+	return (
+		<div className="threads-preview__header">
+			<span className="threads-preview__name">
+				{ name || __( 'Account Name', 'social-previews' ) }
+			</span>
+			<time className="threads-preview__date" dateTime={ postDate.toISOString() }>
+				{ formatThreadsDate( postDate ) }
+			</time>
+		</div>
+	);
+};

package/src/threads-preview/helpers.ts

@@ -0,0 +1,9 @@
+import { firstValid, hardTruncation, shortEnough, stripHtmlTags, Formatter } from '../helpers';
+
+const TITLE_LENGTH = 120;
+
+export const threadsTitle: Formatter = ( text ) =>
+	firstValid(
+		shortEnough( TITLE_LENGTH ),
+		hardTruncation( TITLE_LENGTH )
+	)( stripHtmlTags( text ) ) || '';

package/src/threads-preview/icons/default-avatar.tsx

@@ -0,0 +1,35 @@
+export const DefaultAvatar: React.FC = () => {
+	return (
+		<svg
+			width="36"
+			height="36"
+			viewBox="0 0 6.3500001 6.3500001"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<g>
+				<g>
+					<circle
+						fill="#fff"
+						fillOpacity="1"
+						stroke="#dbdbdb"
+						strokeWidth="0.144331"
+						strokeOpacity="1"
+						strokeDasharray="none"
+						cx="3.175"
+						cy="3.175"
+						r="3.1028347"
+					/>
+					<path
+						fill="#dbdbdb"
+						fillOpacity="1"
+						stroke="#dbdbdb"
+						strokeWidth="0.00924637"
+						strokeOpacity="1"
+						d="m 3.175,0.10128581 c -0.2931267,2e-6 -0.5848453,0.0419523 -0.866097,0.1245402 C 2.0276513,0.30840593 1.7596787,0.43063749 1.5130859,0.58911133 1.1424103,0.82733009 0.82733009,1.1424103 0.58911133,1.5130859 0.43063749,1.7596787 0.30840793,2.0276513 0.22582601,2.308903 0.14323609,2.5901547 0.10128781,2.8818733 0.10128581,3.175 c 5.02e-4,0.1391369 0.0101356,0.2782044 0.0294556,0.4159953 0.01723,0.1151309 0.0411535,0.2291443 0.0713135,0.3415812 0.0045,0.0218 0.009469,0.043412 0.0144694,0.065112 0.03449,0.1203489 0.076152,0.2387347 0.12505697,0.3539836 0.0045,0.01235 0.009253,0.0244 0.0139526,0.03669 0.05201,0.1191279 0.111111,0.235155 0.17776693,0.3467489 0.0038,0.0071 0.008066,0.013651 0.0118856,0.020671 0.0694099,0.1145998 0.14620121,0.2246049 0.22996012,0.3291788 0.0022,0.0029 0.004001,0.00589 0.006201,0.00879 0.0861099,0.1069859 0.17942183,0.208301 0.27905277,0.3028239 0.3233817,-0.5511754 0.8330913,-0.701365 1.065568,-0.697115 h 2.0629232 c 0.5904654,-0.0058 0.9954919,0.5335544 1.1032918,0.6945312 0.0993,-0.09444 0.1921923,-0.1954752 0.2780192,-0.3023071 0.0023,-0.0031 0.00442,-0.0062 0.00672,-0.0093 0.08334,-0.1042929 0.1598386,-0.2139114 0.2289266,-0.3281453 0.004,-0.0073 0.00841,-0.014891 0.012402,-0.022221 0.0663,-0.1112249 0.1254962,-0.2265057 0.1772502,-0.3451986 0.0048,-0.01266 0.00934,-0.025004 0.013953,-0.037724 0.04856,-0.1146958 0.090239,-0.2321796 0.1245402,-0.3519165 0.0053,-0.02288 0.010256,-0.046256 0.014986,-0.069246 0.02971,-0.1111369 0.05321,-0.2236822 0.07028,-0.3374471 0.01929,-0.1376588 0.028946,-0.2764746 0.029456,-0.4154785 0,-0.0503 -0.00112,-0.1006562 -0.00362,-0.1508952 -0.0049,-0.1004917 -0.014695,-0.20073 -0.029455,-0.3002469 C 6.2008813,2.6243448 6.1811701,2.5258685 6.1567301,2.4282756 6.1445102,2.3794856 6.1310225,2.330673 6.1164225,2.282548 6.0286626,1.9932503 5.8988742,1.7184607 5.7309163,1.4670939 5.6750164,1.383444 5.6149083,1.3030201 5.5510824,1.2252482 5.5191724,1.1863682 5.4861603,1.1477995 5.4523804,1.1105265 5.3848104,1.0359766 5.3140214,0.96518559 5.2394735,0.89761963 5.1276256,0.79624473 5.008419,0.70295057 4.8829061,0.61908366 4.7573922,0.53522374 4.6255915,0.46089717 4.4891317,0.39635824 c -0.09095,-0.04302 -0.1838061,-0.0813435 -0.278536,-0.11523845 -0.09473,-0.0339 -0.1912764,-0.0634 -0.2888713,-0.0878499 C 3.7752926,0.15658989 3.6265025,0.13054519 3.4762736,0.11575521 3.3761487,0.10585522 3.2756099,0.10128581 3.175,0.10128581 Z m 0,1.44125569 A 1.4106187,1.4106187 0 0 1 4.5857666,2.9533081 1.4106187,1.4106187 0 0 1 3.175,4.3635579 1.4106187,1.4106187 0 0 1 1.7642334,2.9533081 1.4106187,1.4106187 0 0 1 3.175,1.5425415 Z"
+					/>
+				</g>
+			</g>
+		</svg>
+	);
+};

package/src/threads-preview/index.tsx

@@ -0,0 +1,3 @@
+export * from './link-preview';
+export * from './post-preview';
+export * from './previews';

package/src/threads-preview/link-preview.tsx

@@ -0,0 +1,13 @@
+import { ThreadsPostPreview } from './post-preview';
+import { ThreadsPreviewProps } from './types';
+
+export const ThreadsLinkPreview: React.FC< ThreadsPreviewProps > = ( props ) => {
+	return (
+		<ThreadsPostPreview
+			{ ...props }
+			// Override the props that are irrelevant to link preview
+			text=""
+			media={ undefined }
+		/>
+	);
+};

package/src/threads-preview/media.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import { Fragment } from 'react';
+import { MediaProps } from './types';
+
+export const Media: React.FC< MediaProps > = ( { media } ) => {
+	// Ensure we're only trying to show valid media, and the correct quantity.
+	const filteredMedia = media
+		// Only image/ and video/ mime types are supported.
+		.filter(
+			( mediaItem ) =>
+				mediaItem.type.startsWith( 'image/' ) || mediaItem.type.startsWith( 'video/' )
+		)
+		.filter( ( mediaItem, idx, array ) => {
+			// We'll always keep the first item.
+			if ( 0 === idx ) {
+				return true;
+			}
+
+			// If the first item was a video or GIF, discard all subsequent items.
+			if ( array[ 0 ].type.startsWith( 'video/' ) || 'image/gif' === array[ 0 ].type ) {
+				return false;
+			}
+
+			// The first item wasn't a video or GIF, so discard all subsequent videos and GIFs.
+			if ( mediaItem.type.startsWith( 'video/' ) || 'image/gif' === mediaItem.type ) {
+				return false;
+			}
+
+			return true;
+		} )
+		// We only want the first four items of the array, at most.
+		.slice( 0, 4 );
+
+	if ( 0 === filteredMedia.length ) {
+		return null;
+	}
+
+	const isVideo = filteredMedia[ 0 ].type.startsWith( 'video/' );
+
+	const mediaClasses = clsx( [
+		'threads-preview__media',
+		'threads-preview__media-children-' + filteredMedia.length,
+	] );
+
+	return (
+		<div className={ mediaClasses }>
+			{ filteredMedia.map( ( mediaItem, index ) => (
+				<Fragment key={ `threads-preview__media-item-${ index }` }>
+					{ isVideo ? (
+						// eslint-disable-next-line jsx-a11y/media-has-caption
+						<video controls>
+							<source src={ mediaItem.url } type={ mediaItem.type } />
+						</video>
+					) : (
+						<img alt={ mediaItem.alt || '' } src={ mediaItem.url } />
+					) }
+				</Fragment>
+			) ) }
+		</div>
+	);
+};