diff --git a/app.vue b/app.vue index 61542001..d7648afe 100644 --- a/app.vue +++ b/app.vue @@ -99,34 +99,19 @@ const i18nLinks = computed(() => head.value.link?.map((e: any) => { return e; })); -const loadSettled = ref(false); -const cssLinks = computed<{ - rel: string; - href: string; - as?: string; -}[]>(() => { - /** - * 中国大陸で Google Fonts を使う裏技 - * fonts.googleapis.com → fonts.googleapis.cn - **/ - const cssLinksRaw = (locale.value === 'cn') ? [ - { rel: 'preconnect', href: 'https://fonts.googleapis.cn' }, - { rel: 'preconnect', href: 'https://fonts.gstatic.cn' }, - { rel: 'stylesheet', href: '/fonts/fonts.css'}, - { rel: 'stylesheet', href: 'https://fonts.googleapis.cn/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' } - ] : [ - { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, - { rel: 'preconnect', href: 'https://fonts.gstatic.com' }, - { rel: 'stylesheet', href: '/fonts/fonts.css'}, - { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' }, - ]; - - if (loadSettled.value) { - return cssLinksRaw; - } else { - return cssLinksRaw.map((e) => e.rel === 'stylesheet' ? ({ ...e, rel: 'preload', as: 'style' }) : e); - } -}); +/** + * 中国大陸で Google Fonts を使う裏技 + * fonts.googleapis.com → fonts.googleapis.cn + **/ +const cnHead = (locale.value === 'cn') ? [ + { rel: 'preconnect', href: 'https://fonts.googleapis.cn' }, + { rel: 'preconnect', href: 'https://fonts.gstatic.cn' }, + { rel: 'stylesheet', href: 'https://fonts.googleapis.cn/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' } +] : [ + { rel: 'preconnect', href: 'https://fonts.googleapis.com' }, + { rel: 'preconnect', href: 'https://fonts.gstatic.com' }, + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Capriola&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap' }, +]; useHead((): Record => ({ htmlAttrs: { @@ -156,18 +141,15 @@ useHead((): Record => ({ // TODO content: () => route.meta.thumbnail ? route.meta.thumbnail : `${baseUrl}/img/og/misskey-hub-screenshot-l.png`, }, - ...(head.value.meta?.map((e) => ({ property: e.property, content: e.content })) || []), + ...(head.value.meta?.map((e) => ({ property: e.property, content: e.content, })) || []), ], link: [ ...(i18nLinks.value || []), - ...cssLinks.value, + ...cnHead, ], script: [ { type: "application/ld+json", children: getLdJson(route.meta.graph) } ], - noscript: [ - { children: cssLinks.value.filter((e) => e.rel === 'stylesheet' || (e.rel === 'preload' && e.as === 'style')).map((e) => ``).join('') }, - ] })); /** サイト全体でひとつのScroll Posiitionを使う */ @@ -182,12 +164,6 @@ if (import.meta.client) { window.addEventListener('resize', updatePos); } -onMounted(() => { - nextTick(() => { - loadSettled.value = true; - }); -}); - onUnmounted(() => { if (import.meta.client) { window.removeEventListener('scroll', updatePos); diff --git a/nuxt.config.ts b/nuxt.config.ts index c922e70b..8f629fbd 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -85,6 +85,7 @@ export default defineNuxtConfig({ app: { head: { link: [ + { rel: 'stylesheet', href: '/fonts/fonts.css' }, { rel: 'apple-touch-icon', href: '/img/icons/apple-touch-icon.png' }, { rel: 'shortcut icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' }, { rel: 'icon', type: 'image/vnd.microsoft.icon', href: '/favicon.ico' },