feat: emoji font

zio/stable
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() setupI18n()
setupFontSize() setupFontSize()
setupPageHeader() setupPageHeader()
setupEmojis()
provideGlobalCommands() provideGlobalCommands()
// We want to trigger rerendering the page when account changes // 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 type { Node } from 'ultrahtml'
import { TEXT_NODE, parse, render, walkSync } 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 const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
export function decodeHtml(text: string) { export function decodeHtml(text: string) {
decoder.innerHTML = text 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 `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
return `:${name}:` return `:${name}:`
}) })
.replace(EMOJI_REGEX, '<em-emoji native="$1" />')
if (markdown) { if (markdown) {
// handle code blocks // handle code blocks

View File

@ -1,6 +1,7 @@
import { pwaInfo } from 'virtual:pwa-info' import { pwaInfo } from 'virtual:pwa-info'
import type { Link } from '@unhead/schema' import type { Link } from '@unhead/schema'
import type { Directions } from 'vue-i18n-routing' import type { Directions } from 'vue-i18n-routing'
import { init as initEmojis } from 'emoji-mart'
import { APP_NAME, STORAGE_KEY_LANG } from '~/constants' import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
import type { LocaleObject } from '#i18n' 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),
})
}

Binary file not shown.

View File

@ -4,31 +4,36 @@ html {
@font-face { @font-face {
font-display: swap; font-display: swap;
font-family: "DM Mono"; font-family: 'DM Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(/fonts/DM-mono-v10.ttf) format("truetype"); src: url(/fonts/DM-mono-v10.ttf) format('truetype');
} }
@font-face { @font-face {
font-display: swap; font-display: swap;
font-family: "DM Sans"; font-family: 'DM Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(/fonts/DM-sans-v11.ttf) format("truetype"); src: url(/fonts/DM-sans-v11.ttf) format('truetype');
} }
@font-face { @font-face {
font-display: swap; font-display: swap;
font-family: "DM Serif Display"; font-family: 'DM Serif Display';
font-style: normal; font-style: normal;
font-weight: 400; 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-face {
font-display: swap; font-display: swap;
font-family: "Homemade Apple"; font-family: 'Homemade Apple';
font-style: normal; font-style: normal;
font-weight: 400; 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; --at-apply: font-bold;
} }
p { p {
@ -113,7 +119,8 @@ body {
} }
.code-block { .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 { .shiki {
background: transparent !important; background: transparent !important;
@ -152,7 +159,9 @@ body {
} }
} }
html, body, #__nuxt { html,
body,
#__nuxt {
height: 100vh; height: 100vh;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -184,6 +193,10 @@ body {
em-emoji-picker { em-emoji-picker {
--border-radius: 0; --border-radius: 0;
} }
em-emoji {
font-size: 1.2em;
line-height: 1em;
}
footer { footer {
a { a {