From 64cf9d350903a3c948736eace884c0673d8117ab Mon Sep 17 00:00:00 2001 From: Jesse Wierzbinski Date: Sun, 18 Aug 2024 16:11:45 +0200 Subject: [PATCH] feat: :sparkles: Add Custom Emojis extension --- app/changelog/page.mdx | 2 +- app/extensions/custom-emojis/page.mdx | 79 +++++++++++++++++++++++++++ app/extensions/page.mdx | 4 +- app/structures/emoji/page.mdx | 4 +- components/Navigation.tsx | 1 + 5 files changed, 85 insertions(+), 5 deletions(-) create mode 100644 app/extensions/custom-emojis/page.mdx diff --git a/app/changelog/page.mdx b/app/changelog/page.mdx index 3916255..b350707 100644 --- a/app/changelog/page.mdx +++ b/app/changelog/page.mdx @@ -22,7 +22,7 @@ This page lists changes since Working Draft 03. {{ className: 'lead' }} - Added shared inboxes. - Added `remote` field to [ContentFormat](/structures/content-format). - Switched to [ThumbHash](https://evanw.github.io/thumbhash/) from [BlurHash](https://blurha.sh/). -- Added optional identification characters to [Custom Emojis](/structures/emoji). +- Added identification characters to [Custom Emojis](/structures/emoji). - Added `manually_approves_followers` to [Users](/entities/user). - Removed `visibility` from [Notes](/entities/note). - Made `subject` optional in [Notes](/entities/note). diff --git a/app/extensions/custom-emojis/page.mdx b/app/extensions/custom-emojis/page.mdx new file mode 100644 index 0000000..867a166 --- /dev/null +++ b/app/extensions/custom-emojis/page.mdx @@ -0,0 +1,79 @@ +export const metadata = { + title: "Custom Emojis Extension", + description: "The Custom Emojis extension adds support for custom emojis in notes.", +} + +# Custom Emojis Extension + +The Custom Emojis extension adds support for adding personalized emojis to federated data. {{ className: 'lead' }} + +## Rendering + +To render custom emojis, clients **should** perform the following steps: +1. Find all instances of custom emoji names in the text content. +2. Replace the custom emoji names with the corresponding emoji images in text. + +If custom emojis are not supported, clients **should** leave the custom emoji names as-is. Images **should** have any associated `alt` text for accessibility. + +```html {{ 'title': 'Example HTML/CSS' }} + + +

+ Hello, world! A happy emoji smiling.! +

+``` + +Emojis **should** be displayed at a fixed height (such as `1em`), but their width **should** be allowed to be flexible. + +## Extension Definition + +Custom Emojis can be added to any entity with text content. The extension ID is `pub.versia:custom_emojis`. + + + + + + [Custom emojis](/structures/emoji) to be added to the note. + + + + + + + ```jsonc {{ 'title': 'Example Usage' }} + { + "id": "456df8ed-daf1-4062-abab-491071c7b8dd", + "type": "Note", + "uri": "https://versia.social/notes/456df8ed-daf1-4062-abab-491071c7b8dd", + "created_at": "2024-04-09T01:38:51.743Z", + "content": { + "text/plain": { + "content": "Hello, world :happy_face:!" + } + }, + "extensions": { // [!code focus:16] + "pub.versia:custom_emojis": { + "emojis": [ + { + "name": ":happy_face:", + "content": { + "image/webp": { + "content": "https://cdn.example.com/emojis/happy_face.webp", + "remote": true, + "description": "A happy emoji smiling.", + } + } + } + ] + } + } + } + ``` + + + \ No newline at end of file diff --git a/app/extensions/page.mdx b/app/extensions/page.mdx index 82583cc..05cc9d4 100644 --- a/app/extensions/page.mdx +++ b/app/extensions/page.mdx @@ -21,7 +21,7 @@ Extensions **must not** be designed in a way that makes them required to underst Versia extension names are composed of two parts: - The domain name of the extension author, in reverse order. Example: `pub.versia` -- The extension name, separated by a colon. Example: `likes` +- The extension name, separated by a colon. `snake_case`. Example: `likes` ``` {{ title: "Example Extension Name" }} pub.versia:likes @@ -30,7 +30,7 @@ pub.versia:likes ### Custom entities Custom entities are named in the same way, but with an additional part: -- The entity name, separated by a slash. PascalCase. Example: `Like` +- The entity name, separated by a slash. `PascalCase`. Example: `Like` ``` {{ title: "Example Custom Entity Type" }} pub.versia:likes/Like diff --git a/app/structures/emoji/page.mdx b/app/structures/emoji/page.mdx index f3ebeb1..078c8cf 100644 --- a/app/structures/emoji/page.mdx +++ b/app/structures/emoji/page.mdx @@ -17,11 +17,11 @@ export const metadata = { - Emoji name, optionally surrounded by identification characters (for example, colons: `:happy_face:`). + Emoji name, surrounded by identification characters (for example, colons: `:happy_face:`). Name must match the regex `^[a-zA-Z0-9_-]+$`. - Identification characters must not match the name regex (must not be alphanumeric/underscore/hyphen). + Identification characters must not match the name regex (must not be alphanumeric/underscore/hyphen). There may only be two identification characters, one at the beginning and one at the end. Emoji content. Must be an image format (`image/*`). diff --git a/components/Navigation.tsx b/components/Navigation.tsx index 522dae7..46cbd65 100644 --- a/components/Navigation.tsx +++ b/components/Navigation.tsx @@ -287,6 +287,7 @@ export const navigation: NavGroup[] = [ { title: "Extensions", links: [ + { title: "Custom Emojis", href: "/extensions/custom-emojis" }, { title: "Likes", href: "/extensions/likes" }, { title: "Vanity", href: "/extensions/vanity" }, { title: "WebSockets", href: "/extensions/websockets" },