mirror of
https://github.com/versia-pub/docs.git
synced 2025-12-06 06:18:19 +01:00
feat: ✨ Add Custom Emojis extension
This commit is contained in:
Jesse Wierzbinski
parent
fb197167c7
commit
64cf9d3509
|
|
@ -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).
|
||||
|
|
|
|||
79
app/extensions/custom-emojis/page.mdx
Normal file
79
app/extensions/custom-emojis/page.mdx
Normal file
|
|
@ -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' }}
|
||||
<style>
|
||||
img.emoji {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>
|
||||
Hello, world! <img src="https://cdn.example.com/emojis/happy_face.webp" alt="A happy emoji smiling." class="emoji" />!
|
||||
</p>
|
||||
```
|
||||
|
||||
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`.
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
<Properties>
|
||||
<Property name="emojis" type="CustomEmoji[]" required={true} typeLink="/structures/emoji">
|
||||
[Custom emojis](/structures/emoji) to be added to the note.
|
||||
</Property>
|
||||
</Properties>
|
||||
</Col>
|
||||
|
||||
<Col sticky>
|
||||
|
||||
```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.",
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ export const metadata = {
|
|||
<Col>
|
||||
<Properties>
|
||||
<Property name="name" type="string" required={true}>
|
||||
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.
|
||||
</Property>
|
||||
<Property name="content" type="ContentFormat" required={true} typeLink="/structures/content-format">
|
||||
Emoji content. Must be an image format (`image/*`).
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
|
|
|
|||
Loading…
Reference in a new issue