feat: emoji font

This commit is contained in:
Anthony Fu 2022-12-27 19:37:22 +01:00
parent 30c8e82dbf
commit d9b0e85f63
5 changed files with 35 additions and 11 deletions

View file

@ -2,6 +2,7 @@
setupI18n()
setupFontSize()
setupPageHeader()
setupEmojis()
provideGlobalCommands()
// We want to trigger rerendering the page when account changes

View file

@ -2,6 +2,8 @@ import type { Emoji } from 'masto'
import type { Node } from 'ultrahtml'
import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
const EMOJI_REGEX = /(\p{Emoji_Presentation})/ug
const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
export function decodeHtml(text: string) {
decoder.innerHTML = text
@ -21,6 +23,7 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
return `:${name}:`
})
.replace(EMOJI_REGEX, '<em-emoji native="$1" />')
if (markdown) {
// handle code blocks

View file

@ -1,6 +1,7 @@
import { pwaInfo } from 'virtual:pwa-info'
import type { Link } from '@unhead/schema'
import type { Directions } from 'vue-i18n-routing'
import { init as initEmojis } from 'emoji-mart'
import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
import type { LocaleObject } from '#i18n'
@ -74,3 +75,9 @@ export async function setupI18n() {
})
})
}
export function setupEmojis() {
initEmojis({
data: () => import('@emoji-mart/data').then(r => r.default),
})
}

BIN
public/fonts/seguiemj.ttf Normal file

Binary file not shown.

View file

@ -4,31 +4,36 @@ html {
@font-face {
font-display: swap;
font-family: "DM Mono";
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
src: url(/fonts/DM-mono-v10.ttf) format("truetype");
src: url(/fonts/DM-mono-v10.ttf) format('truetype');
}
@font-face {
font-display: swap;
font-family: "DM Sans";
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
src: url(/fonts/DM-sans-v11.ttf) format("truetype");
src: url(/fonts/DM-sans-v11.ttf) format('truetype');
}
@font-face {
font-display: swap;
font-family: "DM Serif Display";
font-family: 'DM Serif Display';
font-style: normal;
font-weight: 400;
src: url(/fonts/DM-serif-display-v10.ttf) format("truetype");
src: url(/fonts/DM-serif-display-v10.ttf) format('truetype');
}
@font-face {
font-display: swap;
font-family: "Homemade Apple";
font-family: 'Homemade Apple';
font-style: normal;
font-weight: 400;
src: url(/fonts/homemade-apple-v18.ttf) format("truetype");
src: url(/fonts/homemade-apple-v18.ttf) format('truetype');
}
@font-face {
font-display: swap;
font-family: 'EmojiMart';
src: url('/fonts/seguiemj.ttf') format('truetype');
}
* {
@ -99,7 +104,8 @@ body {
}
}
}
b, strong {
b,
strong {
--at-apply: font-bold;
}
p {
@ -113,7 +119,8 @@ body {
}
.code-block {
--at-apply: font-mono bg-code text-base p3 mt-2 rounded overflow-auto leading-1.6em;
--at-apply: font-mono bg-code text-base p3 mt-2 rounded overflow-auto
leading-1.6em;
.shiki {
background: transparent !important;
@ -152,7 +159,9 @@ body {
}
}
html, body, #__nuxt {
html,
body,
#__nuxt {
height: 100vh;
margin: 0;
padding: 0;
@ -184,6 +193,10 @@ body {
em-emoji-picker {
--border-radius: 0;
}
em-emoji {
font-size: 1.2em;
line-height: 1em;
}
footer {
a {